* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.6);
}
.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("img/bg2.jpg") center no-repeat;
  background-size: cover;
  height: 100vh;
}
.nav {
  width: 110px;
  height: 820px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  transition: 0.5s;
}
.nav .btn {
  width: 60px;
  margin-top: 20px;
  margin-left: 25px;
  display: flex;
  justify-content: space-around;
}
.nav .btn .btn-item1 {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #eb5a56;
}
.nav .btn .btn-item2 {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #f8bc33;
}
.nav .btn .btn-item3 {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #62cb44;
}
.nav .header {
  width: 250px;
  height: 60px;
  margin-left: 25px;
  margin-top: 20px;
  display: flex;
}
.nav .header .header-ava {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.nav .header .header-ava img {
  width: 100%;
  margin-top: -5px;
}
.nav .header .header-con {
  margin-left: 20px;
  transition: 0.5s;
  opacity: 0;
}
.nav .header .header-con div {
  font-size: 32px;
  font-weight: 500;
}
.nav .main .line {
  width: 60px;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
  margin: 20px 25px;
  transition: 0.5s;
}
.nav .main .title {
  margin-left: 31px;
}
.nav .main .menu {
  width: 230px;
  margin-left: 25px;
  margin-top: 20px;
}
.nav .main .menu .item {
  border-radius: 5px;
}
.nav .main .server {
  width: 60px;
  border-radius: 10px;
  margin-top: 20px;
  margin-left: 25px;
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  transition: 0.5s;
}
.item {
  display: flex;
  align-items: center;
  transition: 0.2s;
}
.item .item-tip {
  width: 6px;
  height: 50px;
  background: #eb5a56;
  position: absolute;
  margin-left: -25px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  opacity: 0;
  transition: 0.5s;
}
.item .item-icon {
  width: 60px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item .item-icon .iconfont {
  font-size: 26px;
}
.item .item-con {
  width: 0px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
  overflow: hidden;
  left: -20px;
  position: relative;
}
.item .item-r-icon {
  width: 0px;
  transition: 0.5s;
  opacity: 0;
}
.item .item-r-icon .iconfont {
  font-size: 20px;
  color: #62cb44;
}
.item:hover {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}
.item:hover .item-tip {
  opacity: 1;
}
.nav:hover {
  width: 280px;
}
.nav:hover .header-con {
  opacity: 1;
}
.nav:hover .item-r-icon {
  opacity: 1;
}
.nav:hover .item-con {
  width: 140px;
}
.nav:hover .line {
  width: 230px;
}
.nav:hover .server {
  width: 230px;
}
